<template>
  <div class="plane-war-container">
    <div class="game-header">
      <h1>✈️ 飞机大战</h1>
      <div class="game-stats">
        <div class="stat-card">
          <div class="stat-label">分数</div>
          <div class="stat-value">{{ score.toLocaleString() }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">关卡</div>
          <div class="stat-value">{{ currentLevel }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">生命</div>
          <div class="stat-value">{{ lives }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">最高分</div>
          <div class="stat-value">{{ highScore.toLocaleString() }}</div>
        </div>
      </div>
    </div>

    <div class="game-content">
      <!-- 左侧信息面板 -->
      <div class="left-panel">
        <div class="plane-status">
          <h3>✈️ 战机状态</h3>
          <div class="plane-info">
            <div class="health-bar">
              <div class="health-label">血量</div>
              <div class="health-progress">
                <div 
                  class="health-fill" 
                  :style="{ width: (player.health / player.maxHealth) * 100 + '%' }"
                ></div>
              </div>
              <div class="health-text">{{ player.health }}/{{ player.maxHealth }}</div>
            </div>
            
            <div class="weapon-info">
              <div class="weapon-display">
                <div class="weapon-icon">{{ getCurrentWeaponIcon() }}</div>
                <div class="weapon-details">
                  <div class="weapon-name">{{ getCurrentWeaponName() }}</div>
                  <div class="weapon-level">等级 {{ player.weaponLevel }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="powerups-container">
          <h3>🎁 道具效果</h3>
          <div class="active-powerups">
            <div 
              v-for="powerup in activePowerUps"
              :key="powerup.id"
              class="powerup-item"
            >
              <div class="powerup-icon">{{ powerup.icon }}</div>
              <div class="powerup-info">
                <div class="powerup-name">{{ powerup.name }}</div>
                <div class="powerup-timer">{{ Math.ceil(powerup.remaining / 1000) }}s</div>
              </div>
            </div>
          </div>
          <div v-if="activePowerUps.length === 0" class="no-powerups">
            暂无激活道具
          </div>
        </div>

        <div class="controls-info">
          <h3>🎮 操作说明</h3>
          <div class="control-item">
            <span class="key">WASD</span>
            <span class="action">移动战机</span>
          </div>
          <div class="control-item">
            <span class="key">方向键</span>
            <span class="action">移动战机</span>
          </div>
          <div class="control-item">
            <span class="key">空格</span>
            <span class="action">射击</span>
          </div>
          <div class="control-item">
            <span class="key">P</span>
            <span class="action">暂停</span>
          </div>
          <div class="control-item">
            <span class="key">R</span>
            <span class="action">重新开始</span>
          </div>
        </div>
      </div>

      <!-- 游戏主区域 -->
      <div class="game-main">
        <div class="game-controls">
          <button @click="startGame" :disabled="gameRunning" class="control-btn start">
            {{ gameRunning ? '战斗进行中' : '开始战斗' }}
          </button>
          <button @click="pauseGame" :disabled="!gameRunning" class="control-btn pause">
            {{ gamePaused ? '继续' : '暂停' }}
          </button>
          <button @click="resetGame" class="control-btn reset">重新开始</button>
        </div>

        <div class="game-canvas-wrapper">
          <canvas
            ref="gameCanvas"
            :width="canvasWidth"
            :height="canvasHeight"
            class="game-canvas"
            @keydown="handleKeyPress"
            @keyup="handleKeyUp"
            tabindex="0"
          ></canvas>

          <!-- 游戏状态覆盖层 -->
          <div v-if="!gameRunning && !gameOver" class="game-overlay start-overlay">
            <div class="overlay-content">
              <h2>✈️ 准备起飞</h2>
              <p>敌机来袭！驾驶战机保卫天空</p>
              <p>击败敌机，收集道具，挑战更高关卡</p>
              <button @click="startGame" class="overlay-btn">起飞战斗</button>
            </div>
          </div>

          <div v-if="gamePaused" class="game-overlay pause-overlay">
            <div class="overlay-content">
              <h2>⏸️ 战斗暂停</h2>
              <p>按P键或点击继续按钮恢复战斗</p>
              <button @click="pauseGame" class="overlay-btn">继续战斗</button>
            </div>
          </div>

          <div v-if="gameOver" class="game-overlay game-over-overlay">
            <div class="overlay-content">
              <h2>💥 战斗结束</h2>
              <p>最终分数: <strong>{{ score.toLocaleString() }}</strong></p>
              <p>到达关卡: <strong>{{ currentLevel }}</strong></p>
              <p v-if="isNewHighScore" class="new-record">🎉 新纪录！</p>
              <button @click="resetGame" class="overlay-btn">重新战斗</button>
            </div>
          </div>

          <div v-if="levelComplete" class="game-overlay level-complete-overlay">
            <div class="overlay-content">
              <h2>🎊 关卡完成！</h2>
              <p>成功通过第 {{ currentLevel }} 关</p>
              <p>获得奖励: <strong>{{ levelBonus.toLocaleString() }}</strong></p>
              <button @click="nextLevel" class="overlay-btn">下一关</button>
            </div>
          </div>

          <div v-if="bossMode" class="boss-warning">
            <div class="boss-text">⚠️ BOSS 出现 ⚠️</div>
            <div class="boss-health-bar" v-if="bossEnemy">
              <div class="boss-name">{{ bossEnemy.name }}</div>
              <div class="boss-health-progress">
                <div 
                  class="boss-health-fill" 
                  :style="{ width: (bossEnemy.health / bossEnemy.maxHealth) * 100 + '%' }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧信息面板 -->
      <div class="right-panel">
        <div class="enemy-radar">
          <h3>📡 敌机雷达</h3>
          <div class="radar-display">
            <div class="radar-grid">
              <div 
                v-for="enemy in enemies.slice(0, 15)"
                :key="enemy.id"
                class="radar-dot"
                :style="{ 
                  left: (enemy.x / canvasWidth) * 100 + '%',
                  top: (enemy.y / canvasHeight) * 100 + '%',
                  backgroundColor: getEnemyColor(enemy.type)
                }"
              ></div>
            </div>
            <div class="radar-info">
              <div class="enemy-count">敌机数量: {{ enemies.length }}</div>
            </div>
          </div>
        </div>

        <div class="achievements">
          <h3>🏆 成就</h3>
          <div class="achievement-list">
            <div 
              v-for="achievement in achievements"
              :key="achievement.id"
              :class="['achievement', { unlocked: achievement.unlocked }]"
            >
              <div class="achievement-icon">{{ achievement.icon }}</div>
              <div class="achievement-text">
                <div class="achievement-name">{{ achievement.name }}</div>
                <div class="achievement-desc">{{ achievement.description }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="game-tips">
          <h3>💡 战斗提示</h3>
          <div class="tip-list">
            <div class="tip-item">收集道具可以升级武器</div>
            <div class="tip-item">不同敌机有不同的攻击模式</div>
            <div class="tip-item">Boss战需要耐心和技巧</div>
            <div class="tip-item">保持移动避免敌机撞击</div>
            <div class="tip-item">红色敌机血量高但分数多</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 粒子效果容器 -->
    <div class="particles-container">
      <div
        v-for="particle in particles"
        :key="particle.id"
        class="particle"
        :style="particle.style"
      ></div>
    </div>

    <!-- 云朵背景 -->
    <div class="clouds-background">
      <div 
        v-for="cloud in clouds"
        :key="cloud.id"
        class="cloud"
        :style="cloud.style"
      ></div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'

export default {
  name: 'PlaneWarGame',
  setup() {
    // 游戏配置
    const canvasWidth = 800
    const canvasHeight = 600
    const playerWidth = 40
    const playerHeight = 40
    const bulletWidth = 4
    const bulletHeight = 12
    const enemyWidth = 35
    const enemyHeight = 30
    
    // 游戏状态
    const gameRunning = ref(false)
    const gamePaused = ref(false)
    const gameOver = ref(false)
    const levelComplete = ref(false)
    const bossMode = ref(false)
    const score = ref(0)
    const currentLevel = ref(1)
    const lives = ref(3)
    const highScore = ref(parseInt(localStorage.getItem('planeWarHighScore') || '0'))
    const isNewHighScore = ref(false)
    const levelBonus = ref(0)
    
    // 游戏对象
    const player = reactive({
      x: canvasWidth / 2 - playerWidth / 2,
      y: canvasHeight - playerHeight - 30,
      width: playerWidth,
      height: playerHeight,
      speed: 5,
      health: 100,
      maxHealth: 100,
      weaponLevel: 1,
      weaponType: 'normal',
      shield: false,
      rapidFire: false,
      invulnerable: false
    })
    
    const bullets = ref([])
    const enemyBullets = ref([])
    const enemies = ref([])
    const powerUps = ref([])
    const activePowerUps = ref([])
    const particles = ref([])
    const clouds = ref([])
    const bossEnemy = ref(null)
    
    // 输入状态
    const keys = reactive({
      left: false,
      right: false,
      up: false,
      down: false,
      space: false
    })
    
    // 敌机类型定义
    const enemyTypes = [
      { 
        type: 'basic', 
        color: '#00ff00', 
        points: 100, 
        health: 1, 
        speed: 2,
        shootChance: 0.005,
        icon: '🛩️',
        name: '侦察机'
      },
      { 
        type: 'fighter', 
        color: '#ffff00', 
        points: 200, 
        health: 2, 
        speed: 3,
        shootChance: 0.008,
        icon: '✈️',
        name: '战斗机'
      },
      { 
        type: 'bomber', 
        color: '#ff6600', 
        points: 300, 
        health: 3, 
        speed: 1.5,
        shootChance: 0.01,
        icon: '🚁',
        name: '轰炸机'
      },
      { 
        type: 'heavy', 
        color: '#ff0000', 
        points: 500, 
        health: 5, 
        speed: 1,
        shootChance: 0.012,
        icon: '🚀',
        name: '重型机'
      },
      { 
        type: 'boss', 
        color: '#ff00ff', 
        points: 2000, 
        health: 50, 
        speed: 0.8,
        shootChance: 0.02,
        icon: '👹',
        name: 'Boss战机'
      }
    ]
    
    // 武器类型定义
    const weaponTypes = {
      normal: {
        name: '机关枪',
        damage: 1,
        speed: 8,
        cooldown: 150,
        color: '#00ffff',
        icon: '🔫'
      },
      double: {
        name: '双管炮',
        damage: 1,
        speed: 8,
        cooldown: 200,
        color: '#ffff00',
        icon: '💥',
        double: true
      },
      spread: {
        name: '散射炮',
        damage: 1,
        speed: 6,
        cooldown: 250,
        color: '#ff6600',
        icon: '🌟',
        spread: true
      },
      laser: {
        name: '激光炮',
        damage: 3,
        speed: 12,
        cooldown: 100,
        color: '#ff0066',
        icon: '⚡'
      }
    }
    
    // 道具类型定义
    const powerUpTypes = [
      { 
        type: 'health', 
        icon: '❤️', 
        name: '生命恢复', 
        color: '#ff6b6b',
        effect: () => { 
          player.health = Math.min(player.health + 50, player.maxHealth)
        }
      },
      { 
        type: 'weapon_upgrade', 
        icon: '⬆️', 
        name: '武器升级', 
        color: '#4ecdc4',
        effect: () => { 
          if (player.weaponLevel < 4) {
            player.weaponLevel++
            updateWeaponType()
          }
        }
      },
      { 
        type: 'shield', 
        icon: '🛡️', 
        name: '护盾', 
        color: '#45b7d1',
        duration: 15000,
        effect: () => { player.shield = true }
      },
      { 
        type: 'rapid_fire', 
        icon: '🔥', 
        name: '快速射击', 
        color: '#feca57',
        duration: 10000,
        effect: () => { player.rapidFire = true }
      },
      { 
        type: 'extra_life', 
        icon: '👤', 
        name: '额外生命', 
        color: '#ff9ff3',
        effect: () => { lives.value++ }
      }
    ]
    
    // 成就系统
    const achievements = ref([
      { id: 1, name: '新手飞行员', description: '击败10架敌机', icon: '🎯', unlocked: false },
      { id: 2, name: '王牌飞行员', description: '击败100架敌机', icon: '🏆', unlocked: false },
      { id: 3, name: '关卡征服者', description: '通过第5关', icon: '🚀', unlocked: false },
      { id: 4, name: 'Boss终结者', description: '击败Boss', icon: '👹', unlocked: false },
      { id: 5, name: '天空霸主', description: '得分超过50000', icon: '👑', unlocked: false }
    ])
    
    // Canvas 相关
    const gameCanvas = ref(null)
    let ctx = null
    let gameLoop = null
    let lastShot = 0
    let enemiesKilled = 0
    let levelEnemiesSpawned = 0
    let levelEnemiesTotal = 0
    
    // 初始化云朵背景
    const initializeClouds = () => {
      clouds.value = []
      for (let i = 0; i < 8; i++) {
        clouds.value.push({
          id: i,
          style: {
            position: 'absolute',
            left: Math.random() * 100 + '%',
            top: Math.random() * 100 + '%',
            width: (Math.random() * 80 + 40) + 'px',
            height: (Math.random() * 40 + 20) + 'px',
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
            borderRadius: '50px',
            opacity: Math.random() * 0.3 + 0.1,
            animation: `cloudMove ${Math.random() * 20 + 10}s linear infinite`
          }
        })
      }
    }
    
    // 初始化关卡
    const initializeLevel = () => {
      enemies.value = []
      enemyBullets.value = []
      powerUps.value = []
      bossMode.value = false
      bossEnemy.value = null
      
      levelEnemiesSpawned = 0
      levelEnemiesTotal = 10 + currentLevel.value * 5
      
      // Boss关卡
      if (currentLevel.value % 5 === 0) {
        bossMode.value = true
        spawnBoss()
      }
    }
    
    // 生成Boss
    const spawnBoss = () => {
      const bossType = enemyTypes[4]
      const boss = {
        id: Date.now(),
        x: canvasWidth / 2 - 80,
        y: 50,
        width: 160,
        height: 120,
        type: bossType.type,
        color: bossType.color,
        points: bossType.points,
        health: bossType.health + currentLevel.value * 10,
        maxHealth: bossType.health + currentLevel.value * 10,
        speed: bossType.speed,
        shootChance: bossType.shootChance,
        direction: 1,
        lastShot: 0,
        isBoss: true,
        name: bossType.name,
        movePattern: 'horizontal'
      }
      
      enemies.value.push(boss)
      bossEnemy.value = boss
    }
    
    // 生成普通敌机
    const spawnEnemy = () => {
      if (levelEnemiesSpawned >= levelEnemiesTotal || bossMode.value) return
      
      let enemyType = enemyTypes[0] // 默认基础敌机
      
      // 根据关卡决定敌机类型
      const rand = Math.random()
      if (currentLevel.value >= 3 && rand < 0.2) {
        enemyType = enemyTypes[3] // 重型机
      } else if (currentLevel.value >= 2 && rand < 0.4) {
        enemyType = enemyTypes[2] // 轰炸机
      } else if (rand < 0.6) {
        enemyType = enemyTypes[1] // 战斗机
      }
      
      const enemy = {
        id: Date.now() + Math.random(),
        x: Math.random() * (canvasWidth - enemyWidth),
        y: -enemyHeight,
        width: enemyWidth,
        height: enemyHeight,
        type: enemyType.type,
        color: enemyType.color,
        points: enemyType.points,
        health: enemyType.health,
        maxHealth: enemyType.health,
        speed: enemyType.speed + Math.random() * 0.5,
        shootChance: enemyType.shootChance,
        lastShot: 0,
        movePattern: Math.random() < 0.3 ? 'zigzag' : 'straight'
      }
      
      enemies.value.push(enemy)
      levelEnemiesSpawned++
    }
    
    // 更新武器类型
    const updateWeaponType = () => {
      switch (player.weaponLevel) {
        case 1:
          player.weaponType = 'normal'
          break
        case 2:
          player.weaponType = 'double'
          break
        case 3:
          player.weaponType = 'spread'
          break
        case 4:
          player.weaponType = 'laser'
          break
      }
    }
    
    // 获取当前武器信息
    const getCurrentWeaponName = () => {
      return weaponTypes[player.weaponType]?.name || '机关枪'
    }
    
    const getCurrentWeaponIcon = () => {
      return weaponTypes[player.weaponType]?.icon || '🔫'
    }
    
    // 获取敌机颜色
    const getEnemyColor = (type) => {
      const enemyType = enemyTypes.find(t => t.type === type)
      return enemyType ? enemyType.color : '#ffffff'
    }
    
    // 绘制游戏
    const draw = () => {
      if (!ctx) return
      
      // 清空画布
      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
      
      // 绘制天空背景
      const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight)
      gradient.addColorStop(0, '#87CEEB')
      gradient.addColorStop(0.5, '#98D8E8')
      gradient.addColorStop(1, '#B0E0E6')
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, canvasWidth, canvasHeight)
      
      // 绘制玩家战机
      ctx.fillStyle = player.shield ? '#00ffff' : '#4169E1'
      ctx.fillRect(player.x, player.y, player.width, player.height)
      
      // 绘制玩家护盾
      if (player.shield) {
        ctx.strokeStyle = '#00ffff'
        ctx.lineWidth = 3
        ctx.beginPath()
        ctx.arc(player.x + player.width / 2, player.y + player.height / 2, player.width, 0, Math.PI * 2)
        ctx.stroke()
      }
      
      // 绘制玩家血条
      const healthBarWidth = 60
      const healthBarHeight = 6
      const healthBarX = player.x + (player.width - healthBarWidth) / 2
      const healthBarY = player.y - 15
      
      ctx.fillStyle = '#ff0000'
      ctx.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight)
      
      ctx.fillStyle = '#00ff00'
      const healthWidth = (player.health / player.maxHealth) * healthBarWidth
      ctx.fillRect(healthBarX, healthBarY, healthWidth, healthBarHeight)
      
      // 绘制敌机
      enemies.value.forEach(enemy => {
        ctx.fillStyle = enemy.color
        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height)
        
        // 绘制敌机血条（多血量敌机）
        if (enemy.maxHealth > 1) {
          const enemyHealthBarWidth = enemy.width
          const enemyHealthBarHeight = 4
          const enemyHealthBarX = enemy.x
          const enemyHealthBarY = enemy.y - 8
          
          ctx.fillStyle = '#660000'
          ctx.fillRect(enemyHealthBarX, enemyHealthBarY, enemyHealthBarWidth, enemyHealthBarHeight)
          
          ctx.fillStyle = '#ff6666'
          const enemyHealthWidth = (enemy.health / enemy.maxHealth) * enemyHealthBarWidth
          ctx.fillRect(enemyHealthBarX, enemyHealthBarY, enemyHealthWidth, enemyHealthBarHeight)
        }
        
        // Boss特殊效果
        if (enemy.isBoss) {
          ctx.strokeStyle = '#ff00ff'
          ctx.lineWidth = 3
          ctx.strokeRect(enemy.x - 5, enemy.y - 5, enemy.width + 10, enemy.height + 10)
        }
      })
      
      // 绘制子弹
      bullets.value.forEach(bullet => {
        const weapon = weaponTypes[bullet.weapon || 'normal']
        ctx.fillStyle = weapon.color
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height)
        
        // 激光武器特效
        if (bullet.weapon === 'laser') {
          ctx.shadowColor = weapon.color
          ctx.shadowBlur = 10
          ctx.fillRect(bullet.x - 1, bullet.y, bullet.width + 2, bullet.height)
          ctx.shadowBlur = 0
        }
      })
      
      // 绘制敌机子弹
      enemyBullets.value.forEach(bullet => {
        ctx.fillStyle = '#ff4444'
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height)
      })
      
      // 绘制道具
      powerUps.value.forEach(powerUp => {
        ctx.fillStyle = powerUp.color
        ctx.fillRect(powerUp.x, powerUp.y, powerUp.width, powerUp.height)
        
        ctx.fillStyle = 'white'
        ctx.font = '16px Arial'
        ctx.textAlign = 'center'
        ctx.fillText(powerUp.icon, powerUp.x + powerUp.width / 2, powerUp.y + powerUp.height / 2 + 6)
      })
    }
    
    // 更新游戏状态
    const update = () => {
      if (!gameRunning.value || gamePaused.value) return
      
      // 更新玩家移动
      if (keys.left && player.x > 0) {
        player.x -= player.speed
      }
      if (keys.right && player.x < canvasWidth - player.width) {
        player.x += player.speed
      }
      if (keys.up && player.y > 0) {
        player.y -= player.speed
      }
      if (keys.down && player.y < canvasHeight - player.height) {
        player.y += player.speed
      }
      
      // 更新玩家射击
      if (keys.space) {
        shoot()
      }
      
      // 生成敌机
      if (Math.random() < 0.02 && !bossMode.value) {
        spawnEnemy()
      }
      
      // 更新子弹
      bullets.value.forEach((bullet, index) => {
        bullet.y -= bullet.speed
        
        if (bullet.y < 0) {
          bullets.value.splice(index, 1)
        }
      })
      
      // 更新敌机子弹
      enemyBullets.value.forEach((bullet, index) => {
        bullet.y += bullet.speed
        
        if (bullet.y > canvasHeight) {
          enemyBullets.value.splice(index, 1)
        }
        
        // 敌机子弹与玩家碰撞
        if (bullet.x < player.x + player.width &&
            bullet.x + bullet.width > player.x &&
            bullet.y < player.y + player.height &&
            bullet.y + bullet.height > player.y) {
          
          if (!player.shield && !player.invulnerable) {
            player.health -= 20
            player.invulnerable = true
            setTimeout(() => { player.invulnerable = false }, 1000)
            
            if (player.health <= 0) {
              lives.value--
              if (lives.value <= 0) {
                endGame()
              } else {
                respawnPlayer()
              }
            }
          }
          
          enemyBullets.value.splice(index, 1)
          createExplosion(bullet.x, bullet.y, '#ff4444')
        }
      })
      
      // 更新敌机
      enemies.value.forEach(enemy => {
        // 敌机移动
        if (enemy.movePattern === 'zigzag') {
          enemy.x += Math.sin(Date.now() * 0.005) * 2
        }
        enemy.y += enemy.speed
        
        // Boss特殊移动
        if (enemy.isBoss) {
          enemy.x += enemy.direction * 1
          if (enemy.x <= 0 || enemy.x >= canvasWidth - enemy.width) {
            enemy.direction *= -1
          }
        }
        
        // 敌机射击
        if (Math.random() < enemy.shootChance) {
          enemyShoot(enemy)
        }
        
        // 敌机与玩家碰撞
        if (enemy.x < player.x + player.width &&
            enemy.x + enemy.width > player.x &&
            enemy.y < player.y + player.height &&
            enemy.y + enemy.height > player.y) {
          
          if (!player.shield && !player.invulnerable) {
            player.health -= 30
            player.invulnerable = true
            setTimeout(() => { player.invulnerable = false }, 1000)
            
            if (player.health <= 0) {
              lives.value--
              if (lives.value <= 0) {
                endGame()
              } else {
                respawnPlayer()
              }
            }
          }
          
          // 移除敌机
          const index = enemies.value.indexOf(enemy)
          if (index > -1) {
            enemies.value.splice(index, 1)
            createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, enemy.color)
          }
        }
      })
      
      // 移除超出屏幕的敌机
      enemies.value = enemies.value.filter(enemy => enemy.y < canvasHeight + 50)
      
      // 子弹与敌机碰撞检测
      bullets.value.forEach((bullet, bulletIndex) => {
        enemies.value.forEach((enemy, enemyIndex) => {
          if (bullet.x < enemy.x + enemy.width &&
              bullet.x + bullet.width > enemy.x &&
              bullet.y < enemy.y + enemy.height &&
              bullet.y + bullet.height > enemy.y) {
            
            const weapon = weaponTypes[bullet.weapon || 'normal']
            enemy.health -= weapon.damage
            
            bullets.value.splice(bulletIndex, 1)
            createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, enemy.color)
            
            if (enemy.health <= 0) {
              score.value += enemy.points
              enemiesKilled++
              
              // 随机生成道具
              if (Math.random() < 0.15) {
                createPowerUp(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2)
              }
              
              if (enemy.isBoss) {
                bossEnemy.value = null
                unlockAchievement(3) // Boss终结者
              }
              
              enemies.value.splice(enemyIndex, 1)
            }
          }
        })
      })
      
      // 更新道具
      powerUps.value.forEach((powerUp, index) => {
        powerUp.y += powerUp.speed
        
        // 道具与玩家碰撞
        if (powerUp.x < player.x + player.width &&
            powerUp.x + powerUp.width > player.x &&
            powerUp.y < player.y + player.height &&
            powerUp.y + powerUp.height > player.y) {
          
          activatePowerUp(powerUp.type)
          powerUps.value.splice(index, 1)
        }
        
        if (powerUp.y > canvasHeight) {
          powerUps.value.splice(index, 1)
        }
      })
      
      // 更新激活的道具
      activePowerUps.value.forEach((powerUp, index) => {
        powerUp.remaining -= 16
        
        if (powerUp.remaining <= 0) {
          deactivatePowerUp(powerUp.type)
          activePowerUps.value.splice(index, 1)
        }
      })
      
      // 检查关卡完成
      if (!bossMode.value && levelEnemiesSpawned >= levelEnemiesTotal && enemies.value.length === 0) {
        completeLevel()
      } else if (bossMode.value && enemies.value.length === 0) {
        completeLevel()
      }
      
      // 检查成就
      checkAchievements()
    }
    
    // 玩家射击
    const shoot = () => {
      const now = Date.now()
      const weapon = weaponTypes[player.weaponType]
      const cooldown = player.rapidFire ? weapon.cooldown / 2 : weapon.cooldown
      
      if (now - lastShot < cooldown) return
      
      lastShot = now
      
      if (player.weaponType === 'double') {
        // 双管炮
        bullets.value.push({
          x: player.x + 8,
          y: player.y,
          width: bulletWidth,
          height: bulletHeight,
          speed: weapon.speed,
          weapon: player.weaponType
        })
        bullets.value.push({
          x: player.x + player.width - 12,
          y: player.y,
          width: bulletWidth,
          height: bulletHeight,
          speed: weapon.speed,
          weapon: player.weaponType
        })
      } else if (player.weaponType === 'spread') {
        // 散射炮
        for (let i = -1; i <= 1; i++) {
          bullets.value.push({
            x: player.x + player.width / 2 - bulletWidth / 2 + i * 15,
            y: player.y,
            width: bulletWidth,
            height: bulletHeight,
            speed: weapon.speed,
            weapon: player.weaponType
          })
        }
      } else {
        // 普通射击
        bullets.value.push({
          x: player.x + player.width / 2 - bulletWidth / 2,
          y: player.y,
          width: bulletWidth,
          height: bulletHeight,
          speed: weapon.speed,
          weapon: player.weaponType
        })
      }
    }
    
    // 敌机射击
    const enemyShoot = (enemy) => {
      enemyBullets.value.push({
        x: enemy.x + enemy.width / 2 - bulletWidth / 2,
        y: enemy.y + enemy.height,
        width: bulletWidth,
        height: bulletHeight,
        speed: 4
      })
    }
    
    // 创建道具
    const createPowerUp = (x, y) => {
      const powerUpType = powerUpTypes[Math.floor(Math.random() * powerUpTypes.length)]
      
      powerUps.value.push({
        x: x - 15,
        y: y,
        width: 30,
        height: 20,
        speed: 3,
        type: powerUpType.type,
        icon: powerUpType.icon,
        color: powerUpType.color
      })
    }
    
    // 激活道具
    const activatePowerUp = (type) => {
      const powerUpType = powerUpTypes.find(p => p.type === type)
      if (!powerUpType) return
      
      powerUpType.effect()
      
      if (powerUpType.duration) {
        activePowerUps.value.push({
          id: Date.now(),
          type: type,
          name: powerUpType.name,
          icon: powerUpType.icon,
          remaining: powerUpType.duration
        })
      }
    }
    
    // 取消道具效果
    const deactivatePowerUp = (type) => {
      switch (type) {
        case 'shield':
          player.shield = false
          break
        case 'rapid_fire':
          player.rapidFire = false
          break
      }
    }
    
    // 创建爆炸效果
    const createExplosion = (x, y, color) => {
      for (let i = 0; i < 8; i++) {
        createParticle(x, y, color)
      }
    }
    
    // 创建粒子
    const createParticle = (x, y, color) => {
      const particle = {
        id: Date.now() + Math.random(),
        style: {
          position: 'absolute',
          left: `${x}px`,
          top: `${y}px`,
          width: '4px',
          height: '4px',
          backgroundColor: color,
          borderRadius: '50%',
          pointerEvents: 'none',
          animation: 'particleExplode 0.8s ease-out forwards'
        }
      }
      
      particles.value.push(particle)
      
      setTimeout(() => {
        particles.value = particles.value.filter(p => p.id !== particle.id)
      }, 800)
    }
    
    // 玩家重生
    const respawnPlayer = () => {
      player.x = canvasWidth / 2 - playerWidth / 2
      player.y = canvasHeight - playerHeight - 30
      player.health = player.maxHealth
      player.shield = false
      player.rapidFire = false
      player.invulnerable = true
      
      setTimeout(() => { player.invulnerable = false }, 2000)
      
      // 清除所有敌机子弹
      enemyBullets.value = []
    }
    
    // 完成关卡
    const completeLevel = () => {
      levelComplete.value = true
      gameRunning.value = false
      
      levelBonus.value = currentLevel.value * 1000
      score.value += levelBonus.value
      
      checkAchievements()
    }
    
    // 下一关
    const nextLevel = () => {
      currentLevel.value++
      levelComplete.value = false
      
      // 恢复玩家状态
      player.health = Math.min(player.health + 30, player.maxHealth)
      
      initializeLevel()
      startGame()
    }
    
    // 检查成就
    const checkAchievements = () => {
      // 新手飞行员：击败10架敌机
      if (enemiesKilled >= 10 && !achievements.value[0].unlocked) {
        unlockAchievement(0)
      }
      
      // 王牌飞行员：击败100架敌机
      if (enemiesKilled >= 100 && !achievements.value[1].unlocked) {
        unlockAchievement(1)
      }
      
      // 关卡征服者：通过第5关
      if (currentLevel.value >= 5 && !achievements.value[2].unlocked) {
        unlockAchievement(2)
      }
      
      // 天空霸主：得分超过50000
      if (score.value >= 50000 && !achievements.value[4].unlocked) {
        unlockAchievement(4)
      }
    }
    
    // 解锁成就
    const unlockAchievement = (index) => {
      achievements.value[index].unlocked = true
      console.log(`成就解锁: ${achievements.value[index].name}`)
    }
    
    // 游戏控制方法
    const startGame = () => {
      if (gameRunning.value) return
      
      gameRunning.value = true
      gamePaused.value = false
      gameOver.value = false
      levelComplete.value = false
      
      if (enemies.value.length === 0) {
        initializeLevel()
      }
      
      gameLoop = setInterval(() => {
        update()
        draw()
      }, 16) // 60 FPS
      
      nextTick(() => {
        gameCanvas.value?.focus()
      })
    }
    
    const pauseGame = () => {
      if (!gameRunning.value) return
      
      gamePaused.value = !gamePaused.value
      
      if (gamePaused.value) {
        clearInterval(gameLoop)
      } else {
        gameLoop = setInterval(() => {
          update()
          draw()
        }, 16)
        nextTick(() => {
          gameCanvas.value?.focus()
        })
      }
    }
    
    const resetGame = () => {
      clearInterval(gameLoop)
      
      gameRunning.value = false
      gamePaused.value = false
      gameOver.value = false
      levelComplete.value = false
      bossMode.value = false
      score.value = 0
      currentLevel.value = 1
      lives.value = 3
      enemiesKilled = 0
      isNewHighScore.value = false
      
      // 重置游戏对象
      player.x = canvasWidth / 2 - playerWidth / 2
      player.y = canvasHeight - playerHeight - 30
      player.health = player.maxHealth
      player.weaponLevel = 1
      player.weaponType = 'normal'
      player.shield = false
      player.rapidFire = false
      player.invulnerable = false
      
      bullets.value = []
      enemyBullets.value = []
      enemies.value = []
      powerUps.value = []
      activePowerUps.value = []
      particles.value = []
      bossEnemy.value = null
      
      // 重置成就
      achievements.value.forEach(achievement => {
        achievement.unlocked = false
      })
      
      initializeLevel()
      draw()
    }
    
    const endGame = () => {
      clearInterval(gameLoop)
      
      gameRunning.value = false
      gameOver.value = true
      
      // 检查最高分
      if (score.value > highScore.value) {
        highScore.value = score.value
        isNewHighScore.value = true
        localStorage.setItem('planeWarHighScore', score.value.toString())
      }
    }
    
    // 事件处理
    const handleKeyPress = (event) => {
      const key = event.key.toLowerCase()
      
      switch (key) {
        case 'a':
        case 'arrowleft':
          keys.left = true
          break
        case 'd':
        case 'arrowright':
          keys.right = true
          break
        case 'w':
        case 'arrowup':
          keys.up = true
          break
        case 's':
        case 'arrowdown':
          keys.down = true
          break
        case ' ':
          keys.space = true
          event.preventDefault()
          break
        case 'p':
          pauseGame()
          break
        case 'r':
          resetGame()
          break
      }
    }
    
    const handleKeyUp = (event) => {
      const key = event.key.toLowerCase()
      
      switch (key) {
        case 'a':
        case 'arrowleft':
          keys.left = false
          break
        case 'd':
        case 'arrowright':
          keys.right = false
          break
        case 'w':
        case 'arrowup':
          keys.up = false
          break
        case 's':
        case 'arrowdown':
          keys.down = false
          break
        case ' ':
          keys.space = false
          break
      }
    }
    
    // 生命周期
    onMounted(() => {
      ctx = gameCanvas.value.getContext('2d')
      initializeClouds()
      initializeLevel()
      draw()
      
      document.addEventListener('keydown', handleKeyPress)
      document.addEventListener('keyup', handleKeyUp)
    })
    
    onUnmounted(() => {
      clearInterval(gameLoop)
      document.removeEventListener('keydown', handleKeyPress)
      document.removeEventListener('keyup', handleKeyUp)
    })
    
    return {
      // 响应式数据
      gameRunning,
      gamePaused,
      gameOver,
      levelComplete,
      bossMode,
      score,
      currentLevel,
      lives,
      highScore,
      isNewHighScore,
      levelBonus,
      player,
      enemies,
      activePowerUps,
      particles,
      clouds,
      achievements,
      bossEnemy,
      gameCanvas,
      canvasWidth,
      canvasHeight,
      
      // 方法
      startGame,
      pauseGame,
      resetGame,
      nextLevel,
      handleKeyPress,
      handleKeyUp,
      getEnemyColor,
      getCurrentWeaponName,
      getCurrentWeaponIcon
    }
  }
}
</script>

<style scoped>
.plane-war-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);
  min-height: 100vh;
  color: #333;
  position: relative;
  overflow: hidden;
}

.clouds-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.cloud {
  position: absolute;
  border-radius: 50px;
}

@keyframes cloudMove {
  from { transform: translateX(-100px); }
  to { transform: translateX(calc(100vw + 100px)); }
}

.game-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.game-header h1 {
  font-size: 3em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  background: linear-gradient(45deg, #4169E1, #1E90FF, #00BFFF, #87CEEB);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: skyGlow 3s ease infinite;
}

@keyframes skyGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.game-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-card {
  background: rgba(255,255,255,0.9);
  padding: 15px 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(65,105,225,0.3);
  text-align: center;
  min-width: 100px;
  box-shadow: 0 0 20px rgba(65,105,225,0.2);
}

.stat-label {
  font-size: 0.9em;
  opacity: 0.8;
  margin-bottom: 5px;
  color: #666;
}

.stat-value {
  font-size: 1.5em;
  font-weight: bold;
  color: #4169E1;
  text-shadow: 0 0 10px rgba(65,105,225,0.3);
}

.game-content {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 30px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.left-panel, .right-panel {
  background: rgba(255,255,255,0.9);
  padding: 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(65,105,225,0.3);
  box-shadow: 0 0 20px rgba(65,105,225,0.1);
}

.plane-status, .powerups-container, .controls-info {
  margin-bottom: 30px;
}

.plane-status h3, .powerups-container h3, .controls-info h3 {
  text-align: center;
  margin-bottom: 15px;
  color: #4169E1;
  text-shadow: 0 0 10px rgba(65,105,225,0.3);
}

.health-bar {
  margin-bottom: 15px;
}

.health-label {
  font-size: 0.9em;
  margin-bottom: 5px;
  color: #666;
}

.health-progress {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.health-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4444, #ffaa00, #00ff00);
  transition: width 0.3s ease;
}

.health-text {
  font-size: 0.8em;
  text-align: center;
  margin-top: 5px;
  color: #666;
}

.weapon-display {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(65,105,225,0.1);
  border-radius: 8px;
  border: 1px solid rgba(65,105,225,0.2);
}

.weapon-icon {
  font-size: 1.5em;
  margin-right: 10px;
}

.weapon-details {
  flex: 1;
}

.weapon-name {
  font-weight: bold;
  color: #4169E1;
}

.weapon-level {
  font-size: 0.8em;
  color: #666;
}

.active-powerups {
  max-height: 150px;
  overflow-y: auto;
}

.powerup-item {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
}

.powerup-icon {
  font-size: 1.2em;
  margin-right: 10px;
}

.powerup-info {
  flex: 1;
}

.powerup-name {
  font-size: 0.9em;
  font-weight: bold;
  color: #333;
}

.powerup-timer {
  font-size: 0.8em;
  opacity: 0.8;
  color: #ff6600;
}

.no-powerups {
  text-align: center;
  opacity: 0.6;
  font-style: italic;
  color: #666;
}

.control-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.9em;
}

.control-item .key {
  background: #4169E1;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  min-width: 50px;
  text-align: center;
  box-shadow: 0 0 5px rgba(65,105,225,0.3);
}

.control-item .action {
  color: #666;
}

.game-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.control-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  text-transform: uppercase;
}

.control-btn.start {
  background: linear-gradient(45deg, #00ff00, #00cc00);
  color: white;
  box-shadow: 0 0 20px rgba(0,255,0,0.3);
}

.control-btn.pause {
  background: linear-gradient(45deg, #ffaa00, #ff8800);
  color: white;
  box-shadow: 0 0 20px rgba(255,170,0,0.3);
}

.control-btn.reset {
  background: linear-gradient(45deg, #ff0044, #cc0033);
  color: white;
  box-shadow: 0 0 20px rgba(255,0,68,0.3);
}

.control-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

.control-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.game-canvas-wrapper {
  position: relative;
  border: 3px solid #4169E1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(65,105,225,0.5);
}

.game-canvas {
  display: block;
  background: linear-gradient(180deg, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);
  outline: none;
  cursor: crosshair;
}

.game-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.overlay-content {
  text-align: center;
  background: rgba(255,255,255,0.95);
  padding: 40px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(65,105,225,0.5);
  box-shadow: 0 0 30px rgba(65,105,225,0.3);
  color: #333;
}

.overlay-content h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #4169E1;
  text-shadow: 0 0 20px rgba(65,105,225,0.3);
}

.overlay-content p {
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #666;
}

.new-record {
  color: #ff6600 !important;
  font-weight: bold;
  font-size: 1.5em !important;
  animation: celebration 1s infinite;
  text-shadow: 0 0 20px #ff6600;
}

@keyframes celebration {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.overlay-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(45deg, #4169E1, #1E90FF);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(65,105,225,0.3);
}

.overlay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 25px rgba(65,105,225,0.5);
}

.boss-warning {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,0,255,0.9);
  padding: 15px 20px;
  border-radius: 10px;
  border: 2px solid #ff00ff;
  box-shadow: 0 0 20px rgba(255,0,255,0.5);
  z-index: 10;
  min-width: 300px;
}

.boss-text {
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 10px #ff00ff;
  animation: bossWarning 1s infinite;
  text-align: center;
  margin-bottom: 10px;
}

@keyframes bossWarning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.boss-health-bar {
  text-align: center;
}

.boss-name {
  font-size: 0.9em;
  color: white;
  margin-bottom: 5px;
}

.boss-health-progress {
  width: 100%;
  height: 8px;
  background: #660066;
  border-radius: 4px;
  overflow: hidden;
}

.boss-health-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff0066, #ff6600, #ffff00);
  transition: width 0.3s ease;
}

.enemy-radar, .achievements, .game-tips {
  margin-bottom: 30px;
}

.enemy-radar h3, .achievements h3, .game-tips h3 {
  text-align: center;
  margin-bottom: 15px;
  color: #4169E1;
  text-shadow: 0 0 10px rgba(65,105,225,0.3);
}

.radar-display {
  background: rgba(0,0,0,0.8);
  border-radius: 10px;
  padding: 15px;
  border: 2px solid #00ff00;
  box-shadow: 0 0 20px rgba(0,255,0,0.3);
}

.radar-grid {
  position: relative;
  width: 100%;
  height: 120px;
  background: radial-gradient(circle at center, rgba(0,255,0,0.1) 0%, rgba(0,255,0,0.05) 50%, transparent 100%);
  border: 1px solid #00ff00;
  border-radius: 50%;
  margin-bottom: 10px;
}

.radar-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: radarPulse 2s infinite;
}

@keyframes radarPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

.radar-info {
  text-align: center;
  color: #00ff00;
  font-family: monospace;
  font-size: 0.9em;
}

.enemy-count {
  text-shadow: 0 0 10px #00ff00;
}

.achievement-list {
  max-height: 200px;
  overflow-y: auto;
}

.achievement {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.3s ease;
  opacity: 0.5;
}

.achievement.unlocked {
  opacity: 1;
  background: rgba(255,215,0,0.1);
  border-color: #ffd700;
  box-shadow: 0 0 15px rgba(255,215,0,0.3);
}

.achievement-icon {
  font-size: 1.5em;
  margin-right: 10px;
}

.achievement-text {
  flex: 1;
}

.achievement-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.achievement.unlocked .achievement-name {
  color: #ffd700;
}

.achievement-desc {
  font-size: 0.8em;
  opacity: 0.8;
  color: #666;
}

.tip-list {
  font-size: 0.9em;
}

.tip-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #666;
  line-height: 1.4;
}

.tip-item:last-child {
  border-bottom: none;
}

.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.particle {
  position: absolute;
  pointer-events: none;
}

@keyframes particleExplode {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(0) translate(var(--random-x, 50px), var(--random-y, 50px));
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .game-content {
    grid-template-columns: 200px 1fr 200px;
    gap: 20px;
  }
  
  .left-panel, .right-panel {
    padding: 15px;
  }
}

@media (max-width: 900px) {
  .game-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .left-panel, .right-panel {
    display: none;
  }
  
  .game-canvas-wrapper {
    width: 100%;
    max-width: 800px;
  }
  
  .game-canvas {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 600px) {
  .plane-war-container {
    padding: 10px;
  }
  
  .game-header h1 {
    font-size: 2em;
  }
  
  .game-stats {
    gap: 10px;
  }
  
  .stat-card {
    padding: 10px 15px;
    min-width: 80px;
  }
  
  .stat-value {
    font-size: 1.2em;
  }
  
  .game-controls {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .control-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .overlay-content {
    padding: 30px 20px;
    margin: 20px;
  }
  
  .overlay-content h2 {
    font-size: 2em;
  }
  
  .overlay-content p {
    font-size: 1em;
  }
}

/* 动画效果 */
@keyframes gameStart {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scoreIncrease {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); color: #ffd700; }
  100% { transform: scale(1); }
}

@keyframes healthWarning {
  0%, 100% { background-color: #ff0000; }
  50% { background-color: #ff6666; }
}

@keyframes weaponUpgrade {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.2) rotate(90deg); }
  50% { transform: scale(1.1) rotate(180deg); }
  75% { transform: scale(1.2) rotate(270deg); }
  100% { transform: scale(1) rotate(360deg); }
}

@keyframes powerUpGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,255,255,0.5); }
  50% { box-shadow: 0 0 20px rgba(255,255,255,0.8); }
}

/* 特殊效果 */
.game-canvas:focus {
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 25px rgba(65,105,225,0.3);
}

.achievement.unlocked {
  animation: achievementUnlock 0.8s ease-out;
}

@keyframes achievementUnlock {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 滚动条样式 */
.active-powerups::-webkit-scrollbar,
.achievement-list::-webkit-scrollbar {
  width: 6px;
}

.active-powerups::-webkit-scrollbar-track,
.achievement-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.active-powerups::-webkit-scrollbar-thumb,
.achievement-list::-webkit-scrollbar-thumb {
  background: rgba(65,105,225,0.5);
  border-radius: 3px;
}

.active-powerups::-webkit-scrollbar-thumb:hover,
.achievement-list::-webkit-scrollbar-thumb:hover {
  background: rgba(65,105,225,0.7);
}
</style>